import 'package:flutter/material.dart';

class ButtonWidget extends StatelessWidget {
  const ButtonWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Button组件'),
        centerTitle: true,
        backgroundColor: Colors.deepPurple,
      ),
      body: Column(
        children: [
          TextButton(
              onPressed: () {
                print('TextButton');
              },
              child: Text('TextButton')),
          OutlinedButton(
              onPressed: () {
                print('OutlinedButton');
              },
              child: Text('OutlinedButton')),
          ElevatedButton(
            onPressed: () {
              print('ElevatedButton');
            },
            child: Text('ElevatedButton'),

            ///蓝色背景 样式
            style: ElevatedButton.styleFrom(backgroundColor: Colors.blue),
            // style: ButtonStyle(
            //     ///红色背景样式
            //     backgroundColor: MaterialStateProperty.all(Colors.red)),
          ),

          ElevatedButton.icon(
              onPressed: () {},
              icon: Icon(Icons.send),
              label: Text('ElevatedButton.icon')),
          OutlinedButton.icon(
              onPressed: () {},
              icon: Icon(Icons.add),
              label: Text('OutlinedButton.icon')),
          TextButton.icon(
              onPressed: () {},
              icon: Icon(Icons.info),
              label: Text('TextButton.icon')),

          ///圆角按钮
          ElevatedButton(
            onPressed: () {},
            child: const Text('圆角'),
            style: ButtonStyle(
              shape: MaterialStateProperty.all(RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10))),
            ),
          ),

          ///圆形按钮
          Container(
            width: 120,
            height: 120,
            child: ElevatedButton(
              onPressed: () {},
              //圆形
              style: ButtonStyle(
                shape: MaterialStateProperty.all(CircleBorder(
                    side: BorderSide(color: Colors.yellow, width: 5))),
              ),
              child: Text('圆形按钮'),
            ),
          ),

          ///如何修改OutlinedButton的边框
          OutlinedButton(
            onPressed: () {},
            child: Text('OutlinedButton修改边框的颜色'),
            style: ButtonStyle(
                side: MaterialStateProperty.all(
                    BorderSide(width: 1, color: Colors.red))),
          ),

          ///宽度占满整个屏幕
          Row(
            children: [
              Expanded(
                  flex: 1,
                  child: Container(
                    margin: EdgeInsets.all(20),
                    height: 40,
                    child: ElevatedButton(
                      onPressed: () {},
                      style: ButtonStyle(
                          backgroundColor:
                              MaterialStateProperty.all(Colors.red),
                          foregroundColor:
                              MaterialStateProperty.all(Colors.white)),
                      child: Text('宽度占满整个屏幕'),
                    ),
                  ))
            ],
          )
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          print('FloatingActionButton');
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

void f1() {
  print('函数打印');
}
